<template>
    <button class="theme-toggle-btn" :title="isDark ? '切换为亮色模式' : '切换为暗黑模式'" @click="toggleTheme">
        <i :class="iconClass" class="fs-5 transition"></i>
    </button>
</template>

<script setup>
import { computed } from 'vue';
import { useThemeStore } from '../store/theme';

const theme = useThemeStore();
const isDark = computed(() => theme.isDark);
const iconClass = computed(() => (isDark.value ? 'bi bi-sun-fill text-warning' : 'bi bi-moon-stars-fill text-primary'));

const toggleTheme = () => {
    theme.toggle();
};
</script>

<style scoped>
.theme-toggle-btn {
    background: none;
    border: none;
    outline: none;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 30px;
    cursor: pointer;
    color: inherit;
    transition: background-color 0.2s ease-in-out;
}

/* 图标旋转交互 */
.transition {
    transition: transform 0.3s ease;
}
.theme-toggle-btn:hover .transition {
    transform: rotate(20deg);
}
</style>
